<template>
	<view class="container">
		<view class="group_item">
			<view class="group_title">
				姓名：
			</view>
			<input disabled="true" type="text" v-model="lifeInfo.name" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				联系电话：
			</view>
			<input disabled="true" type="tel" v-model="lifeInfo.phone" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				身份证号：
			</view>
			<input disabled="true" type="text" v-model="lifeInfo.idCard" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				一卡通账号：
			</view>
			<input disabled="true" type="text" v-model="lifeInfo.cardAccount" class="picker_class" />
		</view>
		<view class="group_item1">
			<view class="group_title1">
				附件上传：
			</view>
			<view>
				<robby-image-upload v-model="lifeInfo.imageUrl" :enable-del="enableDel" :showUploadProgress="false" :enable-add="enableAdd"></robby-image-upload>
			</view>
		</view>
		<view class="group_item">
			<view class="group_title">
				电子签名：
				<image style="transform:rotate(270deg);" :src=lifeInfo.signature mode="aspectFit"></image>
			</view>
			<view>

			</view>
		</view>
		<view class="group_item">
			<view>
				<view class="group_title">
					流程：
				</view>
				<uni-steps :options="processData" direction="column" :active="active"></uni-steps>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				passState: '', //审核状态
				processData: [],
				active: 0,
				lifeInfo: {},
				header: {
					appId: uni.getStorageSync("appId")
				},
				formData: {},
				enableDel: false,
				enableAdd: false,
				enableDrag: false,
			}
		},
		onLoad(options) {
			this.initData(decodeURIComponent(options.businessKey))
			this.getProcessDiagram(decodeURIComponent(options.businessKey), decodeURIComponent(options.businessCategory))
		},
		methods: {
			//初始化业务详情
			initData(businessKey) {
				this.$api.request.getLifeById({
					id: businessKey
				}, (res) => {
					if (res.code == 200) {
						this.lifeInfo = res.data
						this.lifeInfo.imageUrl = JSON.parse(res.data.imageUrl)
					} else {
						this.$api.msg(res.msg)
					}
				})
			},
			//获取流程图
			getProcessDiagram(businessKey, businessCategory) {
				let parm = {
					businessKey: businessKey,
					hasHistory: true,
					businessCategory: businessCategory
				}
				this.$api.request.getProcessDiagram(parm, (res) => {
					if (res.code == 200) {
						res.data.forEach((item, index) => {
							var data = {}
							if (item.taskHistory[item.taskHistory.length - 1].passState != null) {
								switch (item.taskHistory[item.taskHistory.length - 1].passState) {
									case 0:
										this.passState = '拒绝'
										break
									case 1:
										this.passState = '通过'
										break
									case 2:
										this.passState = '移交'
										break
									case 3:
										this.passState = '驳回'
										break
									default:
										break
								}
								data = {
									title: item.taskName + '（' + item.taskHistory[item.taskHistory.length - 1].taskComment + '）',
									desc: item.taskHistory[item.taskHistory.length - 1].endTime
								}
								this.active = index
							} else {
								if (item.taskHistory.length >= 2) {
									data = {
										title: item.taskName + '（' + item.taskHistory[item.taskHistory.length - 2].taskComment + '）',
										desc: item.taskHistory[item.taskHistory.length - 2].endTime
									}
								} else {
									data = {
										title: item.taskName,
										desc: ''
									}
								}
							}
							this.processData.push(data)
						})
					} else {
						this.$api.msg(res.msg)
					}
				})
			},
			navTo(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
		},
		components: {

		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		background-color: #FBFBFB;
		overflow: hidden;
	}

	.group_item {
		width: 100%;
		padding: 0upx 30upx;
		margin: 10upx 0;
		display: flex;
		flex-direction: row;
		background-color: white;
	}

	.group_item1 {
		width: 100%;
		padding: 10upx 30upx;
		margin: 10upx 0;
		background-color: white;
		overflow: hidden;
	}

	.group_title1 {
		width: 230upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.group_title {
		width: 300upx;
		padding-top: 30upx;
		/* height: 100upx; */
		/* line-height: 100upx; */
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		font-size: 28upx;
	}

	.picker_content_class {
		width: 100%;
		height: 200upx;
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	input {
		padding-left: 10upx;
	}

	.button_class {
		bottom: 40upx;
		margin-top: 20upx;
		width: 80%;
		margin-left: 10%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #1DA3EE !important;
		color: white
	}

	.button_title {
		width: 100%;
		padding-top: 60upx;
		/* height: 100upx; */
		/* line-height: 100upx; */
		font-size: 30upx;
		font-weight: bold;
	}
</style>
